<template>
    <div>
        <el-container>
            <el-aside style="width: 100px" :style="'height:'+ fullHeight + 'px;'">
                <LeftNav></LeftNav>
            </el-aside>
            <el-container>
                <el-header>
                    <Header></Header>
                </el-header>
                <el-main :style="'height:'+ (fullHeight - 60) + 'px;'">
                    <el-row>
                        <el-col :span="15">
                            <div class="routeAndSearch">
                                <el-breadcrumb separator-class="el-icon-arrow-right">
                                    <el-breadcrumb-item v-for="item in breadList" :to="{path:item.path}" :key="item.name" @click.native="getRouter(item.path,item.name)">{{item.name}}</el-breadcrumb-item>
                                </el-breadcrumb>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="routeAndSearch">
                                <Search/>
                            </div>
                        </el-col>
                    </el-row>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    import Header from '../components/public/Header'
    import LeftNav from '../components/public/LeftNav'
    import Search from '../components/yc/Search'
    import {mapActions} from 'vuex'
    export default {
        name: "Main",
        components:{
            Header,LeftNav,Search
        },
        data(){
            return {
                fullHeight:document.documentElement.clientHeight,
            }
        },
        computed:{
            breadList(){
                let dataArr = []
                if(this.$store.state.getRouter.myRouter.length !==1){
                    dataArr = this.$store.state.getRouter.myRouter
                }else {
                    dataArr = JSON.parse(sessionStorage.getItem('myRouter'))
                }
                return dataArr
            }

        },
        methods:{
            ...mapActions(['routerFun']),
            getRouter(path,name) {
                let obj = {path,name}
                this.routerFun(obj)

            }
        }
    }
</script>

<style scoped lang="less">
    .el-header{
        background-color: #ffffff;
        border-bottom: 1px solid #ccc;
    }
    .el-main{

    }
    .el-aside{
        text-align: center;
        background-color: #00B8D2;
    }
    .routeAndSearch{
        height: 40px;
        line-height: 40px;
        .el-breadcrumb{
            height: 40px;
            line-height: 40px;
            font-size: 18px;
        }
    }
</style>